<template>
  <div class="DataFilter">
    <div class="filter-container">
      <income :list="list.annualIncome" :current="query.annualIncome" @listenCondition = "submitCondition"/>
      <!--<dti :list="list.dti" :current="query.dti" @listenCondition = "submitCondition"/>-->
      <ageLimit :list="list.employmentLength" :current="query.employmentLength" @listenCondition = "submitCondition"/>
      <homeOwnership :list="list.homeOwnership" :current="query.homeOwnership" @listenCondition = "submitCondition"/>
      <installment :list="list.installment" :current="query.installment" @listenCondition = "submitCondition"/>
      <interestRate :list="list.interestRate" :current="query.interestRate" @listenCondition = "submitCondition"/>
      <loanAmnt :list="list.loanAmnt" :current="query.loanAmnt" @listenCondition = "submitCondition"/>
      <!--<revolUtil :list="list.revolUtil" :current="query.revolUtil" @listenCondition = "submitCondition"/>-->
      <div class="filter-condition">
        <span style="font-size: 16px;" class="condition-title">最值</span>
        <button
          v-show="sort&&sort[0]!=null"
          :class="{ischeck:aaa==0}"
          class="condition-btn"
          @click="sortCondition(sort[0])">最大值</button>
        <button
          v-show="sort&&sort[1]!=null"
          :class="{ischeck:aaa==1}"
          class="condition-btn"
          @click="sortCondition(sort[1])">第二大值</button>
        <button
          v-show="sort&&sort[2]!=null"
          :class="{ischeck:aaa==2}"
          class="condition-btn"
          @click="sortCondition(sort[2])">第三大值</button>
        <button
          v-show="sort&&sort[3]!=null"
          :class="{ischeck:aaa==3}"
          class="condition-btn"
          @click=" sortCondition(sort[3])">最小值</button>
      </div>
      <br>
      <el-statistic v-show="!isNaN(percent)" :value="percent" group-separator="," title="成功率">
        <template slot="prefix">
          <i class="el-icon-s-flag" style="color: red"/>
        </template>
        <template slot="suffix">
          <i class="el-icon-s-flag" style="color: blue"/>
        </template>
      </el-statistic>
      <div v-show="isNaN(percent)" style="width: 100%;">
        <h2 style="text-align: center;">暂无相关数据</h2>
      </div>

    </div>
  </div>
</template>
<script >
import income from '@/components/PercentFilter/annualIncome.vue'
import dti from '@/components/PercentFilter/annualIncome.vue'
import ageLimit from '@/components/PercentFilter/employmentLength.vue'
import homeOwnership from '@/components/PercentFilter/homeOwnership.vue'
import installment from '@/components/PercentFilter/installment.vue'
import interestRate from '@/components/PercentFilter/interestRate.vue'
import loanAmnt from '@/components/PercentFilter/loanAmnt.vue'
import revolUtil from '@/components/PercentFilter/revolUtil.vue'
export default{
  name: 'PercentFilter',
  components: {
    ageLimit,
    income,
    homeOwnership,
    interestRate,
    loanAmnt,
    dti,
    installment,
    revolUtil
  },
  filters: {},
  props: {
    'list': {
      type: Object,
      default: null
    },
    'full': {
      type: Object,
      default: null
    },
    'sort': {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      query: {
        annualIncome: 0,
        employmentLength: 0,
        homeOwnership: 0,
        interestRate: 0,
        loanAmnt: 0,
        dti: 0,
        installment: 0,
        revolUtil: 0
      },
      percent: 0,
      conditidon: [],
      code: '',
      aaa: -1
    }
  },
  watch: {
    full: {
      immediate: true,
      handler(val, oldVal) {
        this.full = val
        if (this.full != null && this.full.length > 0) {
          this.searchData()
        }
      }
    },
    sort: {
      immediate: true,
      handler(val, oldVal) {
        this.sort = val
        if (this.sort != null && this.sort.length > 0) {
          this.sortCondition(val[0])
        }
      }
    }
  },
  methods: {
    // 搜索函数
    searchData() {
      const a = (this.query.annualIncome + 1)
      const b = (this.query.interestRate + 1) << 4
      const c = (this.query.installment + 1) << 8
      const d = (this.query.employmentLength + 1) << 12
      const e = (this.query.loanAmnt + 1) << 16
      const f = 0// (this.query.dti + 1) << 20
      const g = 0// (this.query.revolUtil + 1) << 24
      const h = (this.query.homeOwnership + 1) << 28
      const code = a + b + c + d + e + f + g + h
      let percents = {}
      for (var key of Object.keys(this.full)) {
        if (Number(key) === code) {
          percents = this.full[key]
          break
        }
      }
      if (percents.num === 0) {
        this.percent = '暂无相关数据'
      } else {
        this.percent = percents.percent / percents.num * 100
      }
      if (code === this.sort[0]) {
        this.aaa = 0
      } else if (code === this.sort[1]) {
        this.aaa = 1
      } else if (code === this.sort[2]) {
        this.aaa = 2
      } else if (code === this.sort[3]) {
        this.aaa = 3
      } else {
        this.aaa = -1
      }
    },
    submitCondition(key, index) {
      this.query[`${key}`] = index
      this.searchData()
    },
    sortCondition(v) {
      this.query.annualIncome = (v & 15) - 1
      this.query.interestRate = ((v >> 4) & 15) - 1
      this.query.installment = ((v >> 8) & 15) - 1
      this.query.employmentLength = ((v >> 12) & 15) - 1
      this.query.loanAmnt = ((v >> 16) & 15) - 1
      this.query.homeOwnership = ((v >> 28) & 3) - 1
      let percents = {}
      for (var key of Object.keys(this.full)) {
        if (key == v) {
          percents = this.full[key]
          break
        }
      }
      if (percents.num === 0) {
        this.percent = '暂无相关数据'
      } else {
        this.percent = percents.percent / percents.num * 100
      }
      if (v === this.sort[0]) {
        this.aaa = 0
      } else if (v === this.sort[1]) {
        this.aaa = 1
      } else if (v === this.sort[2]) {
        this.aaa = 2
      } else if (v === this.sort[3]) {
        this.aaa = 3
      } else {
        this.aaa = -1
      }
    }
  }
}
</script>

<style lang="scss">
.filter-container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.el-statistic{
  .title{
    display: block;
    font-size: 24px;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }
  .number{
    display: block;
    font-size: 20px;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }
}
</style>
